<template>
	<view class="form">
		<view class="upload">
			<view class="title">头像<span class="tips">只能上传jpg/png格式图像，且不能超过500KB</span></view>
			<view class="choose" v-if="img == ''" @tap="chooseImage()"><text class='cuIcon-cameraadd'></text></view>
			<view class="combox" v-else>
				<image class="img" :src="img" mode="aspectFill"></image>
				<view class="icon-close" @tap="deleteImg()"><text class='cuIcon-close'></text></view>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">姓名</view>
			<input placeholder="请输入姓名" v-model="realName"></input>
		</view>
		<view class="cu-form-group border">
			<view class="title">用户名</view>
			<input placeholder="请输入用户名" v-model="userName"></input>
		</view>
		<view class="cu-form-group border">
			<view class="title">手机号</view>
			<input placeholder="请输入手机号" v-model="phone"></input>
		</view>
		<view class="cu-form-group border">
			<view class="title">邮箱</view>
			<input placeholder="请输入邮箱" v-model="email"></input>
		</view>
		<button class="cu-btn btn-default btn" @tap="changeUserInfo()">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img: '',
				realName: '',
				userName: '',
				phone: '',
				email: '',
			};
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (res) => {
						console.log(res);
						this.uploadImage(res.tempFilePaths);
					}
				});
			},
			
			uploadImage(file) {
				uni.showLoading({
					title: '请稍后'
				})
				let token = getApp().globalData.token;
				uni.uploadFile({
				    url: getApp().globalData.url + '/blade-resource/oss/endpoint/put-file',
				    filePath: filePaths[0],
				    name: 'file',
				    // formData: {},
				    header: {
						'blade-auth': "bearer " + token
					},
				    success:(res) => {
						console.log(res);
				        if (res.data.code == 200){
				            console.log('文件上传成功')
				        }
						uni.hideLoading()
				    },
					fail: (res) => {
						console.log(res);
						uni.hideLoading()
						uni.showToast({
							title: '上传失败',
							icon: 'none',
							duration: 2000
						})
					},
					complete: (res) => {
						console.log(res);
						uni.hideLoading()
					}
				});
			},
			
			
			
			deleteImg() {
				this.img = ''
			},
			
			changeUserInfo() {
				// console.log(getApp().globalData.userData);
				if(this.img == '' && this.realName == '' && this.userName == '' && this.phone == '' && this.email == '') {
					uni.showToast({
						duration: 2000,
						title: '您还未做任何修改',
						icon: 'none'
					})
					return
				}
				
				let regPhone = /^1(3|4|5|6|7|8|9)d{9}$/
				if(this.phone !== '' && !regPhone.test(this.phone)) {
					uni.showToast({
						duration: 2000,
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				let regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
				if(this.email !== '' && !regEmail.test(this.email)) {
					uni.showToast({
						duration: 2000,
						title: '请输入正确的邮箱号',
						icon: 'none'
					})
					return
				}
				let token = getApp().globalData.token
				let userId = getApp().globalData.userData.id;
				
				uni.request({
					url: getApp().globalData.url + '/blade-user/update-info',
					header: {
						'blade-auth': "bearer " + token
					},
					method: "post",
					data: {
						id: userId,
						avatar: this.avatar,
						name: this.userName,
						realName: this.realName,
						phone: this.phone,
						email: this.email,
					},
					success: (res) => {
						console.log(res);
						let code = res.data.code;
						if (code == 200) {
							uni.showToast({
								duration: 2000,
								title: '修改成功',
								icon: 'none'
							})
							getApp().globalData.userData.avatar = this.avatar;
							getApp().globalData.userData.realName = this.realName;
						} else {
							uni.showToast({
								duration: 2000,
								title: '修改失败',
								icon: 'none'
							})
						}
					}
				});
			}
		}
	}
</script>

<style>
	.btn {
		width: calc(100% - 60rpx);
		margin: 80rpx 30rpx 0;
	}
	
	.tips {
		margin-left: 20rpx;
		font-size: 18rpx;
		color: #999999;
	}
	
	.upload {
		background-color: #ffffff;
		padding: 30rpx;
		border-bottom: 2rpx solid #eee;
	}
	.upload .choose {
		box-sizing: border-box;
		width: 200rpx;
		height: 200rpx;
		line-height: 200rpx;
		font-size: 72rpx;
		text-align: center;
		margin-left: 80rpx;
		margin-top: 20rpx;
		color: #ddd;
		border: 6rpx solid #ddd;
	}
	
	.upload .combox {
		width: 200rpx;
		height: 200rpx;
		margin-left: 80rpx;
		margin-top: 20rpx;
		position: relative;
	}
	
	.combox .img {
		width: 200rpx;
		height: 200rpx;
	}
	
	.combox .icon-close {
		padding: 20rpx;
		font-size: 36rpx;
		position: absolute;
		top: -40rpx;
		right: -40rpx;
		color: #666;
		font-weight: bold;
	}
</style>
